<template>
    <div>
        <Header></Header>
        <div>
            <el-timeline class="m-timeline">
                <el-timeline-item :timestamp="blog.created | formatDate" placement="top" v-for="blog in blogs" :key="blog.id">
                    <el-card>
                        <h5>
                            <router-link :to="{name: 'Blog', params: {bid: blog.id}}">
                                {{blog.title}}
                            </router-link>
                        </h5>
                        <p>大神 最后修改于 2021-09-01 20:03</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-pagination
                background
                layout="prev, pager, next"
                :total="totalSize"
                :page-size="pageSize"
                :current-page="pageNo"
                @current-change="page">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header'
export default {
    name: "BlogList",
    components: {Header},
    data() {
        return {
            blogs: [],
            pageNo: 1,
            pageSize: 3,
            totalSize: 0
        }
    },
    methods: {
        page(pageNo) {
            const _this = this;
            let pageSize = _this.pageSize;
            _this.$axios.get('/blogs', {params: {pageNo: pageNo, pageSize: pageSize}}).then(res => {
                _this.blogs = res.data.data.records
                _this.pageNo = res.data.data.current
                _this.pageSize = res.data.data.size
                _this.totalSize = res.data.data.total
            });
        }
    },
    created() {
        this.page(1)
    },
    filters: {
        formatDate(dateStr) {
            return dateStr.substring(0, dateStr.length-3).replace('T', ' ')
        }
    }
}
</script>
<style scoped>
.m-timeline {
    text-align: left;
    max-width: 960px;
    margin: 5px auto;
}
</style>